<template>
    <div>
        <hr>
        <p id='result'></p>
        <hr>
    </div>
</template>
<script>
import axios from "axios"
export default {
    methods:{
        getip(){
            var map = new AMap.Map('container', {
        resizeEnable: true
    });
    AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            buttonPosition:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
            if(status=='complete'){
                onComplete(result)
            }else{
                onError(result)
            }
        });
    });
    //解析定位结果
    function onComplete(data) {
        
        var str = [];
        str.push( ""+data.position);
        var list=str.join("")
        console.log(list)
       axios.get("https://restapi.amap.com/v3/geocode/regeo?output=JSON&key=42c320f98c9e4d17afd6fbcd76b1df24&location="+list+"&radius=1000&extensions=all").then((res)=>{
    //    var data=res.data.rectangle; 
     console.log(res.data.regeocode.addressComponent.district)
     document.getElementById('result').innerHTML = res.data.regeocode.addressComponent.district;
     })
        
    }
    //解析定位错误信息
    
        }
    },
    created(){
        this.getip()
    }
}
</script>